<template>
  <div class="root">
    <div class="header">
      <el-button
        class="btn-add"
        @click="addActivity"
        size="small"
        type="primary"
        round
        >新增活动</el-button
      >
    </div>
    <el-table ref="multipleTable" :data="tableData" style="width: 100%">
      <el-table-column
        prop="title"
        label="活动名称"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="sum" label="信息" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button
            @click="openParticipant(scope.row.id)"
            size="small"
            type="text"
            >参会人员信息</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="录入时间"
        show-overflow-tooltip
        sortable
      >
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <el-button @click="editItem(scope.row.id)" size="small" type="text"
            >编辑</el-button
          >
          <el-button @click="openQRCode(scope.row.id)" size="small" type="text"
            >生成报到二维码</el-button
          >
          <el-button
            class="btn-danger"
            @click="askDelete(scope.row.id)"
            size="small"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="params.pageSize"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
    ></el-pagination>
    <el-dialog
      v-if="dialogVisible"
      width="30%"
      title="生成二维码"
      @close="dialogVisible = false"
      :visible.sync="dialogVisible"
    >
      <!-- 放置二维码的容器,需要给一个ref -->
      <div class="dialog-wrap">
        <div id="qrcode" ref="qrcode"></div>
        <el-button type="primary" size="small" @click="downloadQRCode"
          >下载二维码</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      dialogVisible: false,
      keyword: "",
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      tableData: []
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getTableData() {
      let that = this;
      this.req({
        url: `/admin/activity/list?page=${this.params.page}&pageSize=${this.params.pageSize}`,
        data: {},
        method: "POST"
      }).then(
        res => {
          console.log("res :", res);
          const { data } = res;
          that.total = data.total;
          that.tableData = data.list;
        },
        err => {
          console.log("err :", err);
        }
      );
    },
    pageChange(page) {
      console.log("page :", page);
      this.params.page = page;
      this.getTableData();
    },
    askDelete(id) {
      this.$confirm("确定删除该活动吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteItem(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteItem(id) {
      console.log("delete", id);
      this.req({
        url: `/admin/activity/delete?activityIds=${[id]}`,
        data: {},
        method: "POST"
      }).then(
        res => {
          console.log("res :", res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            // this.params.page = 1
            // this.getTableData();
            this.pageChange(1);
          }
        },
        err => {
          console.log("err :", err);
        }
      );
    },
    editItem(id) {
      console.log("edit", id);
      this.$router.push({ name: "addActivity", query: { activityId: id } });
    },
    openQRCode(activityId) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.createQrcode(activityId);
      });
    },
    // 生成二维码
    createQrcode(activityId) {
      this.qr = new QRCode("qrcode", {
        width: 150,
        height: 150, // 高度
        text: `https://ctx.happysooner.com/nanc-h5/activityInfo?activityId=${activityId}` // 二维码内容
      });
    },
    downloadQRCode() {
      const qrCodeDiv = document.getElementById("qrcode"); // 找到二维码div
      const url = qrCodeDiv.querySelector("canvas").toDataURL("image/png"); // 获取图片地址
      const a = document.createElement("a"); // 创建一个a节点插入的document
      const handle = new MouseEvent("click"); // 模拟鼠标click点击事件
      a.download = this.qrCodename; // 设置a节点的download属性值
      a.href = url; // 将图片的src赋值给a节点的href
      a.dispatchEvent(handle); // 触发点击事件
    },
    addActivity() {
      this.$router.push({ name: "addActivity" });
    },
    openParticipant(id) {
      this.$router.push({ name: "participant", query: { activityId: id } });
    }
  }
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-direction: row-reverse;
}
.input-with-select {
  width: 50%;
}
.pagination {
  margin-top: 20px;
  margin-right: 50px;
  float: right;
}
.btn-danger {
  color: red !important;
}
#qrcode img {
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
  margin: 0 auto 10px;
}
.dialog-wrap {
  text-align: center;
}
</style>
